<template>
    <el-dialog v-model="visible" :title="currentPerson.name + ' - 详情'" width="80%" top="5vh"
        class="famous-detail-dialog" @closed="handleClose">
        <!-- 第一部分：名人基本信息 -->
        <div class="detail-section basic-info">
            <div class="left-info">
                <h2 class="person-name">{{ currentPerson.name }}</h2>
                <div class="person-bio" :class="{ 'empty-bio': !currentPerson.bio }">
                    <p>{{ currentPerson.bio || '暂无简介' }}</p>
                    <el-button type="primary" class="comment-btn" @click="scrollToComment" round>
                        <el-icon>
                            <ChatDotRound />
                        </el-icon>
                        评论
                    </el-button>
                </div>
            </div>
            <div class="right-carousel">
                <el-carousel :interval="5000" height="400px" indicator-position="outside" arrow="always">
                    <el-carousel-item v-for="(img, index) in currentPerson.images" :key="index">
                        <div class="carousel-image-container">
                            <el-image :src="img" fit="cover" class="carousel-image"
                                :preview-src-list="currentPerson.images" :initial-index="index">
                                <template #error>
                                    <div class="image-placeholder">
                                        <el-icon>
                                            <Picture />
                                        </el-icon>
                                        <span>暂无图片</span>
                                    </div>
                                </template>
                            </el-image>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <!-- 第二部分：人物关系 - 横向排列 -->
        <div class="detail-section relationship-section">
            <h3 class="section-title with-divider">人物关系</h3>
            <div class="relationship-container">
                <div v-for="(relation, index) in currentPerson.relationships" :key="index" class="relationship-item">
                    <div class="avatar-container">
                        <el-avatar :size="80" :src="relation.avatar" shape="circle" class="relation-avatar">
                            {{ relation.name.charAt(0) }}
                        </el-avatar>
                    </div>
                    <div class="relation-info">
                        <div class="relation-type">{{ relation.type }}</div>
                        <div class="relation-name">{{ relation.name }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三部分：成员事件 - 固定图片尺寸 -->
        <div class="detail-section event-section">
            <h3 class="section-title with-divider">成员事件</h3>
            <div class="event-container">
                <div v-for="(event, index) in currentPerson.events" :key="index" class="event-item">
                    <div class="event-image-container">
                        <el-image :src="event.image" fit="cover" class="event-image">
                            <template #error>
                                <div class="image-placeholder">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                    </div>
                    <div class="event-content">
                        <div class="event-header">
                            <h4 class="event-title">{{ event.title }}</h4>
                            <div class="event-meta">
                                <el-tag size="small" :type="getEventTagType(event.type)" effect="light">
                                    {{ event.type }}
                                </el-tag>
                                <span class="event-time">{{ event.time }}</span>
                            </div>
                        </div>
                        <div class="event-desc">
                            {{ event.description }}
                        </div>
                        <div class="event-footer">
                            <el-button type="text" @click="showEventDetail(event)" class="detail-btn">
                                查看详情
                                <el-icon>
                                    <ArrowRight />
                                </el-icon>
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <eventDetail v-model:visible="eventDialogVisible" :event="currentEvent" @close="handleEventDialogClose" />

        <!-- 第四部分：评论组件 -->
        <CommentSection :person-id="currentPerson.id" @submit-comment="submitComment" ref="commentSection" />
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import {
    ChatDotRound,
    Picture,
    ArrowRight
} from '@element-plus/icons-vue'
import CommentSection from './commentSection.vue'
import eventDetail from './eventDetail.vue'

interface Person {
    id: number
    name: string
    bio?: string
    images?: string[]
    relationships?: {
        name: string
        type: string
        avatar?: string
    }[]
    events?: {
        title: string
        type: string
        time: string
        description: string
        image?: string
    }[]
}

interface EventItem {
    title: string
    type: string
    time: string
    description: string
    image?: string
}

const props = defineProps<{
    person: Person
}>()

const emit = defineEmits(['close'])
const eventDialogVisible = ref(false)
const currentEvent = ref<EventItem | null>(null)
const visible = ref(true)

const showEventDetail = (event: EventItem) => {
    currentEvent.value = event
    eventDialogVisible.value = true
}

// 合并传入的名人数据和默认值
const currentPerson = computed<Person>(() => {
    const defaultData = {
        id: 0,
        name: '未知名人',
        bio: '暂无简介',
        cover: '',
        images: [
            'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
        ],
        relationships: [
            { name: '张某某', type: '父亲', avatar: '' },
            { name: '李某某', type: '母亲', avatar: '' },
            { name: '王某某', type: '儿子', avatar: '' },
            { name: '赵某某', type: '女儿', avatar: '' }
        ],
        events: [
            {
                title: '出生',
                type: '人生大事',
                time: '1950年1月1日',
                description: '出生于某某村庄，是家中的长子。',
                image: ''
            },
            {
                title: '考入大学',
                type: '教育',
                time: '1968年9月1日',
                description: '以优异成绩考入某某大学，攻读某某专业。在校期间表现优异，获得多项荣誉。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。以优异成绩考入某某大学，攻读某某专。',
                image: ''
            },
            {
                title: '结婚',
                type: '人生大事',
                time: '1975年5月1日',
                description: '与某某结婚，婚后育有两子一女。',
                image: ''
            }
        ]
    }

    const mergedData = {
        ...defaultData,
        ...props.person,
        // 深度合并数组
        images: props.person?.images?.length ? props.person.images : defaultData.images,
        relationships: props.person?.relationships?.length ? props.person.relationships : defaultData.relationships,
        events: props.person?.events?.length ? props.person.events : defaultData.events
    }

    return mergedData
})

const getEventTagType = (type: string) => {
    const typeMap: Record<string, string> = {
        '人生大事': 'danger',
        '教育': 'success',
        '事业': 'warning',
        '荣誉': 'primary'
    }
    return typeMap[type] || 'info'
}

const handleEventDialogClose = () => {
    eventDialogVisible.value = false
    currentEvent.value = null
}

const scrollToComment = () => {
    const commentSection = document.querySelector('.comment-section')
    commentSection?.scrollIntoView({ behavior: 'smooth' })
}

const submitComment = (comment: string) => {
    console.log('提交评论:', comment)
}

const handleClose = () => {
    emit('close')
}
</script>

<style scoped lang="scss">
.famous-detail-dialog {
    --primary-color: #5a3e2f;
    --secondary-color: #8ba892;
    --bg-color: #f7f3e9;
    --border-color: #d6c8b8;
    --hover-color: #e4d8c8;

    background-color: var(--bg-color);
    border-radius: 12px;
    padding: 18px;
    max-height: 90vh;
    overflow-y: auto;

    /* 第一部分：基本信息 */
    .detail-section.basic-info {
        display: flex;
        gap: 24px;
        margin-bottom: 20px;

        .left-info {
            flex: 1;
            min-width: 280px;

            .person-name {
                font-size: 32px;
                color: var(--primary-color);
                margin-bottom: 16px;
                padding-bottom: 8px;
                border-bottom: 2px solid var(--border-color);
                font-family: 'Ma Shan Zheng', cursive;
                letter-spacing: 1px;
            }

            .person-bio {
                height: 320px;
                padding: 16px;
                background-color: white;
                border-radius: 8px;
                position: relative;
                line-height: 1.8;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                overflow-y: auto;
                border: 1px solid var(--border-color);

                &.empty-bio {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: var(--el-text-color-secondary);
                    font-style: italic;
                }

                .comment-btn {
                    position: absolute;
                    right: 16px;
                    bottom: 16px;
                    background-color: #d6c8b8;
                    border-color: #d6c8b8;
                    color: white;
                    font-weight: bold;

                    &:hover {
                        background-color: #5a3e2f;
                    }
                }
            }
        }

        .right-carousel {
            width: 380px;
            flex-shrink: 0;

            .el-carousel {
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                border: 1px solid var(--border-color);
            }

            .carousel-image-container {
                width: 100%;
                height: 100%;
                background-color: #f0e6d6;
                display: flex;
                align-items: center;
                justify-content: center;

                .carousel-image,
                .image-placeholder {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                    .el-icon {
                        font-size: 48px;
                        color: var(--primary-color);
                        margin-bottom: 10px;
                    }

                    span {
                        color: var(--primary-color);
                        font-size: 16px;
                    }
                }
            }
        }
    }

    /* 通用标题样式 */
    .section-title {
        font-size: 26px;
        color: var(--primary-color);
        margin-bottom: 18px;
        font-family: 'Ma Shan Zheng', cursive;
        letter-spacing: 1px;
        position: relative;
        padding-left: 12px;

        &.with-divider {
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 5px;
                height: 26px;
                background-color: var(--secondary-color);
                border-radius: 3px;
            }
        }
    }

    /* 第二部分：人物关系 - 横向排列自动换行 */
    .relationship-section {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(162, 228, 31, 0.1);
        margin-bottom: 20px;
        border: 1px solid var(--border-color);

        .relationship-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;

            .relationship-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-width: 120px;
                transition: transform 0.3s ease;

                &:hover {
                    transform: translateY(-5px);
                }

                .avatar-container {
                    margin-bottom: 12px;

                    .relation-avatar {
                        background-color: #f0e6d6;
                        color: var(--primary-color);
                        font-weight: bold;
                        font-size: 24px;
                        border: 2px solid var(--border-color);
                        transition: all 0.3s ease;

                        &:hover {
                            transform: scale(1.05);
                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                        }
                    }
                }

                .relation-info {
                    text-align: center;

                    .relation-type {
                        font-size: 14px;
                        color: var(--secondary-color);
                        margin-bottom: 4px;
                    }

                    .relation-name {
                        font-weight: bold;
                        color: var(--primary-color);
                        font-size: 16px;
                    }
                }
            }
        }
    }

    /* 第三部分：成员事件 - 带滚动条 */
    .event-section {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border-color);

        .event-container {
            max-height: 500px;
            overflow-y: auto;
            padding-right: 10px;

            /* 自定义滚动条 */
            &::-webkit-scrollbar {
                width: 6px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: var(--border-color);
                border-radius: 3px;
            }

            .event-item {
                display: flex;
                gap: 20px;
                padding: 16px;
                margin-bottom: 16px;
                background-color: #f9f5f0;
                border-radius: 8px;
                transition: all 0.3s ease;
                border: 1px solid var(--border-color);

                &:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
                    background-color: var(--hover-color);
                }

                .event-image-container {
                    width: 120px;
                    height: 120px;
                    flex-shrink: 0;
                    background-color: #f0e6d6;
                    border-radius: 4px;
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px solid var(--border-color);

                    .event-image {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .image-placeholder {
                        .el-icon {
                            font-size: 36px;
                            color: var(--primary-color);
                        }
                    }
                }

                .event-content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .event-header {
                        margin-bottom: 12px;

                        .event-title {
                            font-size: 20px;
                            margin: 0 0 8px 0;
                            color: var(--primary-color);
                            font-weight: bold;
                        }

                        .event-meta {
                            display: flex;
                            align-items: center;
                            gap: 15px;

                            .el-tag {
                                font-weight: bold;
                            }

                            .event-time {
                                font-size: 14px;
                                color: var(--el-text-color-secondary);
                            }
                        }
                    }

                    .event-desc {
                        margin-bottom: 12px;
                        color: var(--el-text-color-regular);
                        line-height: 1.8;
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .event-footer {
                        margin-top: auto;
                        text-align: right;

                        .detail-btn {
                            color: var(--secondary-color);
                            font-weight: bold;

                            &:hover {
                                color: var(--primary-color);
                            }

                            .el-icon {
                                margin-left: 5px;
                                transition: transform 0.3s ease;
                            }

                            &:hover .el-icon {
                                transform: translateX(3px);
                            }
                        }
                    }
                }
            }
        }
    }
}

/* 响应式设计 */
@media (max-width: 992px) {
    .famous-detail-dialog {
        width: 90% !important;
        padding: 12px;

        .detail-section.basic-info {
            flex-direction: column;

            .left-info,
            .right-carousel {
                width: 100% !important;
            }

            .right-carousel {
                margin-top: 16px;
                height: 300px;
            }
        }

        .relationship-container {
            justify-content: center;
            gap: 20px;
        }

        .event-item {
            flex-direction: column;

            .event-image-container {
                width: 100% !important;
                height: 200px !important;
                margin-bottom: 12px;
            }
        }
    }
}
</style>